<template>
  <div class="wft-w-h-100">
    <van-swipe
      class="v-swiper"
      :ref="attrs.ref" 
      :loop="attrs.circular" 
      :autoplay="attrs.interval * 1000"
      :show-indicators="attrs.indicator"
      :width="curComp.grid.width"
      :height="curComp.grid.height"
      indicator-color="#fff"
    >
      <van-swipe-item v-for="item in data.data" :key="item.url">
        <img v-if="item.type == 'image'" :src="item.url" class="wft-w-h-100" />
        <video v-else :src="item.url" :autoplay="true" :loop="true" :muted="true" class="wft-w-h-100" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import useRequestMixin from '../../../mixins/useRequest'
import useAttrsMixin from '../../../mixins/useAttrs'
export default {
  name: 'basicSwiper',
  mixins: [useRequestMixin, useAttrsMixin],
  props: {
    curComp: {
      type: Object,
      required: true
    },
    data: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
}

::v-deep .v-swiper {
  width: 100%!important;
  height: 100%!important;
}

::v-deep .van-swipe-item {
  width: 100%!important;
  height: 100%!important;
}
</style>
